<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1">
    <meta name="keywords" content="现代全栈WEB开发">
    <meta name="format-detection" content="telephone=no">
    <meta name="description" content="现代全栈WEB开发">
    <meta name="author" content="xiaojiangK">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <title>现代全栈WEB开发</title>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="images/favicon.png">
    <link rel="stylesheet" href="style/global.css">
    <link rel="stylesheet" href="style/style.css">
</head>
<body>
<div class="jumbotron">
    <div class="container">
        <h1>现代全栈WEB开发
            <sup>
                <a href="https://gitee.com/xiaojiangK/full-stack-development" target="_blank" title="Github">
                    <svg class="octicon octicon-mark-github" viewBox="0 0 16 16" version="1.1" width="16" height="16"
                         aria-hidden="true">
                        <path fill-rule="evenodd"
                              d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path>
                    </svg>
                </a>
            </sup>
        </h1>
    </div>
</div>
<div class="container">
    <div class="row">
        <div class="col-md-2">
            <h5>HTML/CSS</h5>
            <ol>
                <li><a href="posts/HTML&CSS/HTML元素.html" target="_blank">HTML元素</a></li>
                <li><a href="posts/HTML&CSS/语义化标签.html" target="_blank">语义化标签</a></li>
                <li class="fold-panel"><a href="posts/HTML&CSS/CSS3样式.html" target="_blank">CSS3样式</a><sup class="more">more</sup>
                    <ul>
                        <li><a href="posts/HTML&CSS/CSS选择器.html" target="_blank">CSS选择器</a></li>
                        <li><a href="posts/HTML&CSS/CSS继承属性.html" target="_blank">CSS继承属性</a></li>
                        <li><a href="posts/HTML&CSS/CSS3核心模块.html" target="_blank">CSS3核心模块</a></li>
                        <li><a href="posts/HTML&CSS/CSS盒子模型.html" target="_blank">CSS盒子模型</a></li>
                        <li><a href="posts/HTML&CSS/CSS背景图像.html" target="_blank">CSS背景图像</a></li>
                        <li><a href="posts/HTML&CSS/CSS清除浮动.html" target="_blank">CSS清除浮动</a></li>
                        <li><a href="posts/HTML&CSS/CSS定位.html" target="_blank">CSS定位</a></li>
                    </ul>
                </li>
                <li><a href="posts/HTML&CSS/SVG指南.html" target="_blank">SVG指南</a></li>
                <li><a href="posts/HTML&CSS/弹性图片.html" target="_blank">弹性图片</a></li>
                <li><a href="posts/HTML&CSS/CSS-BFC.html" target="_blank">CSS BFC</a></li>
                <li><a href="http://cssreference.parryqiu.com/" target="_blank">CSSReference</a></li>
                <li><a href="instance/css/animation/index.html" target="_blank">动画</a></li>
                <li><a href="instance/css/rotate-dropdown-menu/index.html" target="_blank">旋转下拉菜单</a></li>
                <li><a href="instance/css/ribbonMenu/index.html" target="_blank">飘带样式菜单</a></li>
                <li><a href="instance/css/dropdownMenu/index.html" target="_blank">二级下拉菜单</a></li>
            </ol>
            <h5>Less</h5>
            <ol>
                <li><a href="posts/Less/Less基础.html" target="_blank">Less基础</a></li>
            </ol>
            <h5>SVG</h5>
            <ol>
                <li><a href="http://svgtrick.com/" target="_blank">svgtrick</a></li>
            </ol>
            <h5>Font</h5>
            <ol>
                <li><a href="posts/Font/Web字体.html" target="_blank">Web字体</a></li>
            </ol>
            <h5>Canvas</h5>
            <ol>
                <li><a href="https://www.yuque.com/airing/canvas/readme" target="_blank">CANVAS·语雀</a></li>
                <li><a href="instance/canvas/clock/index.html" target="_blank">时钟</a></li>
                <li><a href="instance/canvas/imageCut/index.html" target="_blank">图像缩放和裁剪</a></li>
            </ol>
            <h5>Bootstrap</h5>
            <ol>
                <li><a href="instance/bootstrap/book-list/index.html" target="_blank">图书列表</a></li>
                <li><a href="instance/bootstrap/tabPage/index.html" target="_blank">标签页</a></li>
                <li><a href="https://startbootstrap.com/" target="_blank">Bootstrap模板</a></li>
            </ol>
            <h5>网页特效</h5>
            <ol>
                <li><a href="http://www.5iweb.com.cn/" target="_blank">网页特效库</a></li>
            </ol>
        </div>
        <div class="col-md-2">
            <h5>JS/JQ</h5>
            <ol>
                <li><a href="posts/JS&JQ/JS基础知识.html" target="_blank">JS基础知识</a></li>
                <li><a href="posts/JS&JQ/JS实用技巧.html" target="_blank">JS实用技巧</a></li>
                <li><a href="posts/JS&JQ/学习JS的8张思维导图.html" target="_blank">学习JS的8张思维导图</a></li>
                <li><a href="posts/JS&JQ/JQ的deferred对象.html" target="_blank">JQ的deferred对象</a></li>
                <li><a href="posts/JS&JQ/jQuery学习笔记.html" target="_blank">jQuery学习笔记</a></li>
                <li><a href="posts/JS&JQ/正则表达式实例.html" target="_blank">正则表达式实例</a></li>
                <li><a href="posts/JS&JQ/正则表达式.html" target="_blank">正则表达式</a></li>
                <li><a href="posts/JS&JQ/JS思维导图.html" target="_blank">JS思维导图</a></li>
            </ol>
            <h5>JS库</h5>
            <ol>
                <li><a href="instance/framework/KineticJS/index.html" target="_blank">小丑(KineticJS)</a></li>
                <li><a href="https://cn.rx.js.org/" target="_blank">RxJS中文文档</a></li>
                <li><a href="http://graphql.cn/" target="_blank">GraphQL</a></li>
            </ol>
            <h5>JS实例</h5>
            <ol>
                <li><a href="instance/js/slideshow/index.html" target="_blank">图片轮播</a></li>
                <li><a href="instance/js/foldablePanel/index.html" target="_blank">可折叠面板</a></li>
                <li><a href="instance/js/gobang/index.html" target="_blank">五子棋</a></li>
                <li><a href="instance/js/migration-map/index.html" target="_blank">春运迁移图</a></li>
                <li><a href="instance/js/newsClient/index.html" target="_blank">网易新闻客户端</a></li>
                <li><a href="instance/js/webPage/index.html" target="_blank">盲僧李青</a></li>
                <li><a href="instance/js/dropdown-menu/index.html" target="_blank">下拉菜单</a></li>
            </ol>
            <h5>JQ实例</h5>
            <ol>
                <li><a href="instance/jquery/pwdMeter/index.html" target="_blank">密码强度表单验证</a></li>
                <li><a href="instance/jquery/foldable-control-panel/index.html" target="_blank">可折叠控制面板</a></li>
                <li><a href="instance/jquery/focus-picture/index.html" target="_blank">全屏焦点图</a></li>
                <li><a href="instance/jquery/clock/index.html" target="_blank">时钟</a></li>
                <li><a href="instance/jquery/multi-menu/index.html" target="_blank">垂直多级菜单</a></li>
            </ol>
        </div>
        <div class="col-md-2">
            <h5>高性能JavaScript</h5>
            <ol>
                <li><a href="posts/高性能JavaScript/目录结构.html" target="_blank">目录结构</a></li>
                <li><a href="posts/高性能JavaScript/第1章：加载和执行.html" target="_blank">第1章：加载和执行</a></li>
                <li><a href="posts/高性能JavaScript/第2章：数据存取.html" target="_blank">第2章：数据存取</a></li>
                <li><a href="posts/高性能JavaScript/第3章：DOM编程.html" target="_blank">第3章：DOM编程</a></li>
                <li><a href="posts/高性能JavaScript/第4章：算法与流程控制.html" target="_blank">第4章：算法与流程控制</a></li>
                <li><a href="posts/高性能JavaScript/第5章：字符串和正则表达式.html" target="_blank">第5章：字符串和正则表达式</a></li>
                <li><a href="posts/高性能JavaScript/第6章：快速响应的用户界面.html" target="_blank">第6章：快速响应的用户界面</a></li>
                <li><a href="posts/高性能JavaScript/第7章：Ajax.html" target="_blank">第7章：Ajax</a></li>
                <li><a href="posts/高性能JavaScript/第8章：编程实践.html" target="_blank">第8章：编程实践</a></li>
                <li><a href="posts/高性能JavaScript/第9章：构建并部署高性能JavaScript应用.html"
                       target="_blank">第9章：构建并部署高性能JavaScript应用</a></li>
                <li><a href="posts/高性能JavaScript/第10章：工具.html" target="_blank">第10章：工具</a></li>
            </ol>
            <h5>CSS世界</h5>
            <ol>
                <li><a href="posts/CSS世界/目录结构.html" target="_blank">目录结构</a></li>
                <li><a href="posts/CSS世界/第1章 概述.html" target="_blank">第1/2章 概述/术语和概念</a></li>
                <li><a href="posts/CSS世界/第3章 流、元素和基本概念.html" target="_blank">第3章 流、元素和基本概念</a></li>
                <li><a href="posts/CSS世界/第4章 盒尺寸四大家族.html" target="_blank">第4章 盒尺寸四大家族</a></li>
                <li><a href="posts/CSS世界/第5章 内联元素与流.html" target="_blank">第5章 内联元素与流</a></li>
                <li><a href="posts/CSS世界/第6章 流的破坏与保护.html" target="_blank">第6章 流的破坏与保护</a></li>
                <li><a href="posts/CSS世界/第7章 层叠规则.html" target="_blank">第7章 层叠规则</a></li>
                <li><a href="posts/CSS世界/第8章 文本处理能力.html" target="_blank">第8章 文本处理能力</a></li>
                <li><a href="posts/CSS世界/第9章 元素的修饰与美化.html" target="_blank">第9章 元素的修饰与美化</a></li>
                <li><a href="posts/CSS世界/第10章 元素的显示与隐藏.html" target="_blank">第10章 元素的显示与隐藏</a></li>
                <li><a href="posts/CSS世界/第11章 用户界面样式.html" target="_blank">第11章 用户界面样式</a></li>
            </ol>
        </div>
        <div class="col-md-2">
            <h5>Vue基础</h5>
            <ol>
                <li><a href="posts/Vue实战/基础知识.html" target="_blank">基础知识</a></li>
                <li><a href="posts/Vue实战/计算属性.html" target="_blank">计算属性</a></li>
                <li><a href="posts/Vue实战/v-bind及class与style绑定.html" target="_blank">v-bind及class与style绑定</a></li>
                <li><a href="posts/Vue实战/内置指令.html" target="_blank">内置指令</a></li>
                <li><a href="posts/Vue实战/方法与事件.html" target="_blank">方法与事件</a></li>
                <li><a href="posts/Vue实战/实战：开发购物车.html" target="_blank">实战：开发购物车</a></li>
                <li><a href="posts/Vue实战/表单与v-model.html" target="_blank">表单与v-model</a></li>
                <li><a href="posts/Vue实战/组件详解.html" target="_blank">组件详解</a></li>
                <li><a href="posts/Vue实战/实战：常用组件的开发.html" target="_blank">实战：常用组件的开发</a></li>
                <li><a href="posts/Vue实战/自定义指令.html" target="_blank">自定义指令</a></li>
            </ol>
            <h5>Vue进阶</h5>
            <ol>
                <li><a href="posts/Vue实战/Render函数.html" target="_blank">Render函数</a></li>
                <li><a href="posts/Vue实战/函数化组件.html" target="_blank">函数化组件</a></li>
                <li><a href="posts/Vue实战/使用webpack构建.html" target="_blank">使用webpack构建</a></li>
                <li><a href="posts/Vue实战/Vue插件.html" target="_blank">Vue插件</a></li>
                <li><a href="posts/Vue实战/状态管理与Vuex.html" target="_blank">状态管理与Vuex</a></li>
                <li><a href="posts/Vue实战/iView组件.html" target="_blank">iView组件</a></li>
            </ol>
            <h5>Vue实战</h5>
            <ol>
                <li><a href="posts/Vue实战/Vue实例.html" target="_blank">Vue实例</a></li>
                <li><a href="instance/vue/todoMVC/index.html" target="_blank">TodoMVC</a></li>
                <li><a href="instance/vue/commentBoard/index.html" target="_blank">评论面板</a></li>
            </ol>
        </div>
        <div class="col-md-2">
            <h5>HTTP/Ajax</h5>
            <ol>
                <li><a href="posts/HTTP&Ajax/HTTP细节.html" target="_blank">HTTP细节</a></li>
                <li><a href="posts/HTTP&Ajax/HTTP反向代理服务器.html" target="_blank">HTTP反向代理服务器</a></li>
                <li><a href="posts/HTTP&Ajax/Ajax技术细节.html" target="_blank">Ajax技术细节</a></li>
                <li><a href="https://yuchengkai.cn/docs/zh/cs/#udp" target="_blank">计算机网络通识</a></li>
            </ol>
            <h5>Git</h5>
            <ol>
                <li><a href="posts/Git/Git命令.html" target="_blank">Git命令</a></li>
                <li><a href="posts/Git/Git技术细节.html" target="_blank">Git技术细节</a></li>
            </ol>
            <h5>性能优化</h5>
            <ol>
                <li><a href="posts/性能优化/性能优化.html" target="_blank">性能优化</a></li>
                <li><a href="posts/性能优化/全栈开发技能.html" target="_blank">全栈开发技能</a></li>
                <li><a href="posts/性能优化/前端工程化.html" target="_blank">前端工程化</a></li>
            </ol>
            <h5>面试题</h5>
            <ol>
                <li><a href="posts/面试题/前端开发面试题.html" target="_blank">前端开发面试题</a></li>
            </ol>
        </div>
        <div class="col-md-2">
            <h5>前端开发</h5>
            <ol>
                <li><a href="https://xiaojiangk.gitee.io/site-nav/" target="_blank">前端网址导航</a></li>
            </ol>
            <h5>Webpack</h5>
            <ol>
                <li><a href="posts/深入浅出 Webpack/前端发展概述.html" target="_blank">前端发展概述</a></li>
                <li><a href="posts/深入浅出 Webpack/webpack入门.html" target="_blank">webpack入门</a></li>
                <li><a href="posts/深入浅出 Webpack/webpack配置.html" target="_blank">webpack配置</a></li>
                <li class="fold-panel"><a href="posts/深入浅出 Webpack/webpack实战.html" target="_blank">webpack实战</a><sup
                        class="more">more</sup>
                    <ul>
                        <li><a href="posts/深入浅出 Webpack/使用ES6语言.html" target="_blank">使用ES6语言</a></li>
                        <li><a href="posts/深入浅出 Webpack/使用SCSS语言.html" target="_blank">使用SCSS语言</a></li>
                        <li><a href="posts/深入浅出 Webpack/使用Flow检查器.html" target="_blank">使用Flow检查器</a></li>
                        <li><a href="posts/深入浅出 Webpack/使用PostCSS.html" target="_blank">使用PostCSS</a></li>
                        <li><a href="posts/深入浅出 Webpack/使用React框架.html" target="_blank">使用React框架</a></li>
                        <li><a href="posts/深入浅出 Webpack/使用Vue框架.html" target="_blank">使用Vue框架</a></li>
                        <li><a href="posts/深入浅出 Webpack/为单页应用生成HTML.html" target="_blank">为单页应用生成HTML</a></li>
                        <li><a href="posts/深入浅出 Webpack/管理多个单页应用.html" target="_blank">管理多个单页应用</a></li>
                        <li><a href="posts/深入浅出 Webpack/构建同构应用.html" target="_blank">构建同构应用</a></li>
                        <li><a href="posts/深入浅出 Webpack/构建Electron应用.html" target="_blank">构建Electron应用</a></li>
                        <li><a href="posts/深入浅出 Webpack/构建Npm模块.html" target="_blank">构建Npm模块</a></li>
                        <li><a href="posts/深入浅出 Webpack/构建离线应用.html" target="_blank">构建离线应用</a></li>
                        <li><a href="posts/深入浅出 Webpack/搭配Npm Script.html" target="_blank">搭配Npm Script</a></li>
                        <li><a href="posts/深入浅出 Webpack/检查代码.html" target="_blank">检查代码</a></li>
                        <li><a href="posts/深入浅出 Webpack/通过 Node.js API 启动 Webpack.html" target="_blank">通过 Node.js API
                            启动 Webpack</a>
                        </li>
                        <li><a href="posts/深入浅出 Webpack/使用 Webpack Dev Middleware.html" target="_blank">使用 Webpack Dev
                            Middleware</a>
                        </li>
                        <li><a href="posts/深入浅出 Webpack/加载图片.html" target="_blank">加载图片</a></li>
                        <li><a href="posts/深入浅出 Webpack/加载 SVG.html" target="_blank">加载 SVG</a></li>
                        <li><a href="posts/深入浅出 Webpack/加载 Source Map.html" target="_blank">加载 Source Map</a></li>
                        <li><a href="posts/深入浅出 Webpack/实战总结.html" target="_blank">实战总结</a></li>
                    </ul>
                </li>
                <li class="fold-panel"><a href="posts/深入浅出 Webpack/webpack优化.html" target="_blank">webpack优化</a><sup
                        class="more">more</sup>
                    <ul>
                        <li><a href="posts/深入浅出 Webpack/缩小文件搜索范围.html" target="_blank">缩小文件搜索范围</a></li>
                        <li><a href="posts/深入浅出 Webpack/使用 DllPlugin.html" target="_blank">使用 DllPlugin</a></li>
                        <li><a href="posts/深入浅出 Webpack/使用 HappyPack.html" target="_blank">使用 HappyPack</a></li>
                        <li><a href="posts/深入浅出 Webpack/使用 ParallelUglifyPlugin.html" target="_blank">使用
                            ParallelUglifyPlugin</a>
                        </li>
                        <li><a href="posts/深入浅出 Webpack/使用自动刷新.html" target="_blank">使用自动刷新</a></li>
                        <li><a href="posts/深入浅出 Webpack/开启模块热替换.html" target="_blank">开启模块热替换</a></li>
                        <li><a href="posts/深入浅出 Webpack/区分环境.html" target="_blank">区分环境</a></li>
                        <li><a href="posts/深入浅出 Webpack/压缩代码.html" target="_blank">压缩代码</a></li>
                        <li><a href="posts/深入浅出 Webpack/CDN 加速.html" target="_blank">CDN 加速</a></li>
                        <li><a href="posts/深入浅出 Webpack/使用 Tree Shaking.html" target="_blank">使用 Tree Shaking</a></li>
                        <li><a href="posts/深入浅出 Webpack/提取公共代码.html" target="_blank">提取公共代码</a></li>
                        <li><a href="posts/深入浅出 Webpack/分割代码按需加载.html" target="_blank">分割代码按需加载</a></li>
                        <li><a href="posts/深入浅出 Webpack/使用 Prepack.html" target="_blank">使用 Prepack</a></li>
                        <li><a href="posts/深入浅出 Webpack/开启 Scope Hoisting.html" target="_blank">开启 Scope Hoisting </a>
                        </li>
                        <li><a href="posts/深入浅出 Webpack/输出分析.html" target="_blank">输出分析 </a></li>
                        <li><a href="posts/深入浅出 Webpack/优化总结.html" target="_blank">优化总结 </a></li>
                    </ul>
                </li>
                <li class="fold-panel"><a href="posts/深入浅出 Webpack/webpack原理.html" target="_blank">webpack原理</a><sup
                        class="more">more</sup>
                    <ul>
                        <li><a href="posts/深入浅出 Webpack/工作原理概括.html" target="_blank">工作原理概括</a></li>
                        <li><a href="posts/深入浅出 Webpack/输出文件分析.html" target="_blank">输出文件分析</a></li>
                        <li><a href="posts/深入浅出 Webpack/编写 Loader.html" target="_blank">编写 Loader</a></li>
                        <li><a href="posts/深入浅出 Webpack/编写 Plugin.html" target="_blank">编写 Plugin</a></li>
                        <li><a href="posts/深入浅出 Webpack/调试 Webpack.html" target="_blank">调试 Webpack</a></li>
                        <li><a href="posts/深入浅出 Webpack/原理总结.html" target="_blank">原理总结</a></li>
                    </ul>
                </li>
                <li><span>附录</span>
                    <ul>
                        <li><a href="posts/深入浅出 Webpack/常用 Loaders.html" target="_blank">常用 Loaders</a></li>
                        <li><a href="posts/深入浅出 Webpack/常用 Plugins.html" target="_blank">常用 Plugins</a></li>
                    </ul>
                </li>
            </ol>
        </div>
    </div>
</div>
<div class="scroll-top opacity">
    <span class="arrow-icon"></span>
</div>
<footer class="app-footer">
    <div>Copyright © 2018-<script type="text/javascript">document.write(new Date().getFullYear());</script> xiaojiangK All Rights Reserved.</div>
    <div class="bdsharebuttonbox"><a href="#" class="bds_more" data-cmd="more"></a><a title="分享到QQ空间" href="#" class="bds_qzone" data-cmd="qzone"></a><a title="分享到新浪微博" href="#" class="bds_tsina" data-cmd="tsina"></a><a title="分享到腾讯微博" href="#" class="bds_tqq" data-cmd="tqq"></a><a title="分享到微信" href="#" class="bds_weixin" data-cmd="weixin"></a><a title="分享到百度贴吧" href="#" class="bds_tieba" data-cmd="tieba"></a></div>
    <script>window._bd_share_config={"common":{"bdSnsKey":{"tsina":""},"bdText":"","bdMini":"2","bdMiniList":["qzone","tsina","weixin","tqq","tieba","douban"],"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='https://xiaojiangk.gitee.io/full-stack-development/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script> </div>

    <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="count-text" id="busuanzi_container_page_pv">
        <div class="padding border border-sub border-dotted fadein-left">
            本站阅读量<span id="busuanzi_value_page_pv"></span>次
        </div>
    </span>
    <span class="count-text" id="busuanzi_container_site_pv">| &nbsp; 本站访问量<span id="busuanzi_value_site_pv"></span>次</span>
    <span class="count-text" id="busuanzi_container_site_uv">
        <div class="padding border border-sub border-dotted fadein-right">
            | &nbsp; 本站访客数<span id="busuanzi_value_site_uv"></span>人
        </div>
    </span>
</footer>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
    $(function () {
        $(window).scroll(function () {
            var $Height = $(window).scrollTop();
            if ($Height === 0) {
                $('.scroll-top').addClass('opacity');
            } else {
                $('.scroll-top').removeClass('opacity');
            }
            if ($Height > 100) {
                $(".scroll-top").fadeIn(500);
            } else {
                $(".scroll-top").fadeOut(500);
            }
        });
        $('.scroll-top').on('click', function () {
            $('html,body').animate({scrollTop: 0}, 500);
        });
    })
</script>
</body>
</html>
